<template>
    <div id="main">
    </div>
</template>


<script setup>
import { inject, onMounted, ref, watch } from 'vue'
const echarts = inject('echarts')

// 定义图像配置对象
let option = {
    color: ['#56A3F1', '#FF917C'],
    title: {
        text: '综合成绩'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        show: true,
        left: '0',
        top: '60',
        orient: 'vertical'
    },
    radar: [
        {
            axisLine: {
                lineStyle: {
                    color: 'rgba(211, 253, 250, 0.8)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(211, 253, 250, 0.8)'
                }
            }
        },
        {
            indicator: [
                { text: '知识类', max: 150 },
                { text: '技能类', max: 150 },
                { text: '素养类', max: 150 }
            ],
            center: ['55%', '60%'],
            radius: 120,
            axisName: {
                color: '#000',
                // backgroundColor: '#666',
                borderRadius: 3,
                padding: [3, 5]
            }
        }
    ],
    series: [
        {
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            radarIndex: 1,
            data: [
                {
                    value: [],
                    name: '个人成绩',
                    symbol: 'rect',
                    symbolSize: 12,
                    lineStyle: {
                        type: 'solid'
                    },
                    label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        }
                    }
                },
                {
                    value: [],
                    name: '平均成绩',
                    symbol: 'rect',
                    symbolSize: 12,
                    lineStyle: {
                        type: 'solid'
                    },
                    label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        }
                    }
                }
            ]
        }
    ]
};

const props = defineProps({
    personal: {
        default: () => [120, 118, 130],
        type: Array,
        required: true
    },
    average: {
        default: () => [80, 75, 60],
        type: Array,
        required: true
    },
})

onMounted(() => {
    var chartDom = document.querySelector('#main');
    let myChart = echarts.init(chartDom);
    option && myChart.setOption(option);

    // initCharts()


    watch(() => props.personal, (newval, oldval) => {
        option.series[0].data[0].value = newval
        option && myChart.setOption(option);
    },
        {
            immediate: true
        }
    )

    watch(() => props.average, (newval, oldval) => {
        option.series[0].data[1].value = newval
        option && myChart.setOption(option);
    },
        {
            immediate: true
        }
    )
})



function initCharts() {
    var chartDom = document.querySelector('#main');
    let myChart = echarts.init(chartDom);

    let option = {
        color: ['#56A3F1', '#FF917C'],
        title: {
            text: '综合成绩'
        },
        legend: {},
        radar: [
            {
                axisLine: {
                    lineStyle: {
                        color: 'rgba(211, 253, 250, 0.8)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(211, 253, 250, 0.8)'
                    }
                }
            },
            {
                indicator: [
                    { text: '知识类', max: 150 },
                    { text: '技能类', max: 150 },
                    { text: '素养类', max: 150 }
                ],
                center: ['50%', '70%'],
                radius: 120,
                axisName: {
                    color: '#000',
                    // backgroundColor: '#666',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            }
        ],
        series: [
            {
                type: 'radar',
                radarIndex: 1,
                data: [
                    {
                        value: [120, 118, 130],
                        name: '个人成绩',
                        symbol: 'rect',
                        symbolSize: 12,
                        lineStyle: {
                            type: 'solid'
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value;
                            }
                        }
                    },
                    {
                        value: [80, 75, 60],
                        name: '平均成绩',
                        symbol: 'rect',
                        symbolSize: 12,
                        lineStyle: {
                            type: 'solid'
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value;
                            }
                        }
                    }
                ]
            }
        ]
    };
    option && myChart.setOption(option);
}
</script>

<style scoped>
#main {
    box-sizing: border-box;
    width: 500px;
    height: 290px;
    border: 1px solid #ccc;
    padding-top: 10px;
    padding-left: 50px;
}
</style>